<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head profile="http://gmpg.org/xfn/11">

	<title>Accordion WRT widget</title>

	<!-- Meta Tags -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="accordion, javascript accordion, scriptaculous" />
	<meta name="robots" content="index, follow" />
	
	<!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <link rel="stylesheet" type="text/css" href="demo.css" />

	<!-- JavaScript -->
	<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/effects.js"></script>
	<script type="text/javascript" src="javascript/accordion.js"></script>
	<script type="text/javascript" src="demo.js"></script>

</head>

<body>

<div id="container">
		
    <h1><span>Accordion</span> WRT widget</h1>    
        
	<div id="vertical_container" >

   	<h1 class="accordion_toggle">Introduction</h1>
		<div class="accordion_content">   
      <h2>What's this accordion?</h2>
      <p>This is a lightweight accordion built with scriptaculous and it works properly in every browser. </p>
    </div>
    
		<h1 class="accordion_toggle">Learn how to use this accordion</h1>
		<div class="accordion_content">

			<h2>Include JavaScript files</h2>
            <p>
            	You need to include accordion.js ant its dependencies -- prototype.js and effects.js as follows:
<pre><code class="html">&lt;script type="text/javascript" src="javascript/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/effects.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="javascript/accordion.js"&gt;&lt;/script&gt;</code></pre>           
            <h2>Custom(demo.js and demo.css)</h2>
            <p>
				Define your accordions in demo.js and define the styles of them in demo.css.
            </p>
		</div>
		
		<h1 class="accordion_toggle">Use Prototype.js(Horizontal Nested)</h1>
		<div class="accordion_content">
			
            <h2>Use prototype.js in WRT widget</h2>
            <div id="horizontal_container" >            
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
        <ul style="margin: 0 0 0 5px;">
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_in_WRT_application">Summary</a> in WRT application
		  </li>
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_basic_operations_%28utility_functions%2C_etc%29_in_WRT_application"> basic operations (Utility fucntions, etc)</a> in WRT application
		  </li>
        </ul>
                </div>
                
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
        <ul style="margin: 0 0 0 5px;">
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_string_manipulation_in_WRT_application"> string manipulation</a> in WRT application
		  </li>
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Object_Creation_in_WRT_application"> Object Creation</a> in WRT application
		  </li>
        </ul>
                </div>
        
                <h3 class="horizontal_accordion_toggle"></h3>
                <div class="horizontal_accordion_content">
        <ul style="margin: 0 0 0 5px;">
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Prototype_UI_in_WRT_application"> Prototype UI</a> in WRT application
		  </li>
          <li>
Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Form_and_AJAX%28JSON%29_in_WRT_application"> Form and AJAX(JSON)</a> in WRT application
		  </li>
        </ul>
                </div>
            </div>
		</div>
   	
		<h1 class="accordion_toggle">Use Prototype.js(Vertical Nested)</h1>
		<div class="accordion_content">

            <div id="vertical_nested_container" >
            
                <h3 class="vertical_accordion_toggle">Summary</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_in_WRT_application">Summary</a> in WRT application
					</p>  	
                </div>
                
                <h3 class="vertical_accordion_toggle">basic operations</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_basic_operations_%28utility_functions%2C_etc%29_in_WRT_application"> basic operations (Utility fucntions, etc)</a> in WRT application
                    </p>   	
                </div>
        
                <h3 class="vertical_accordion_toggle">string manipulation</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_string_manipulation_in_WRT_application"> string manipulation</a> in WRT application
                    </p>  	
                </div>
                <h3 class="vertical_accordion_toggle">Object Creation</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Object_Creation_in_WRT_application"> Object Creation</a> in WRT application
                    </p>  	
                </div>
                <h3 class="vertical_accordion_toggle">Prototype UI</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Prototype_UI_in_WRT_application"> Prototype UI</a> in WRT application
                    </p>  	
                </div>
                <h3 class="vertical_accordion_toggle">Form and AJAX(JSON)</h3>
                <div class="vertical_accordion_content">
                    <p>
					Use prototype javascript library : <a href="http://wiki.forum.nokia.com/index.php/Use_prototype_javascript_library_:_Form_and_AJAX%28JSON%29_in_WRT_application"> Form and AJAX(JSON)</a> in WRT application
                    </p>  	
                </div>
            </div>
		</div>
		
        
		<h1 class="accordion_toggle">About this demo</h1>
		<div class="accordion_content">
            <h2>Demo author</h2>
            <p>
				This demo is writtern by <a href="http://www.ibomobi.com"><small>ibomobi.com</small></a>.
            </p> 
            <h2>Accordion.js author</h2>
			<p>Accordion.js comes from <a href="http://www.stickmanlabs.com"><small>stickmanlabs</small></a></p>
				
		</div>
	</div>

	<div class="page-footer">
		<p>&copy; Copyright 2008 <a href="http://www.ibomobi.com"><small>ibomobi.com</small></a></p>
		<p>Accordion is freely distributable under the terms of an MIT-style license.</p>
	</div>
	
</div>
</body>
</html>
